<!DOCTYPE html>
<html>
<head>
  <title>SVG tests | anime.js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:title" content="anime.js">
  <meta property="og:url" content="http://animejs.com">
  <meta property="og:description" content="Javascript Animation Engine">
  <meta property="og:image" content="http://animejs.com/documentation/assets/img/icons/og.png">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="anime.js">
  <meta name="twitter:site" content="@juliangarnier">
  <meta name="twitter:description" content="Javascript Animation Engine">
  <meta name="twitter:image" content="http://animejs.com/documentation/assets/img/icons/twitter.png">
  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
  <link href="../css/anime.css" rel="stylesheet">
  <script src="../js/anime.min.js"></script>
  <!-- <script src="../assets/js/anime.1.3.js"></script> -->
  <!-- <script src="../assets/js/anime.2.0.1.js"></script> -->
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" id="svg8" width="500" height="500" viewBox="0 0 500 500">
    <g id="layer1">
      <path id="right" fill="none" stroke="#c3c3c3" stroke-width="3" d="M226.07 433.57c1.43-75 67.5-231.78 233.22-140.36"/>
      <path id="left" fill="none" stroke="#c3c3c3" stroke-width="3" d="M226.07 433.57c1.43-75-73.93-166.07-179.64-208.2"/>
      <path id="middle" fill="none" stroke="#c3c3c3" stroke-width="3" d="M226.07 433.57c1.43-75 .36-212.5-40.36-350.36"/>
      <path id="gras" fill="none" stroke="#FFF" stroke-width="3" d="M226.07 433.57c1.43-75-73.93-166.07-179.64-208.2"/>
    </g>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 700 700">
    <path id="morph" fill="#FF0000" fill-rule="evenodd" d="M207.16 334.2c-11.66-52.7 16.3-93.27 54.68-181.1 38.37-87.84 90.58-150.57 188.5-136 97.92 14.59 66.56 161.92 30.21 235.42-36.35 73.51-33.76 120.9-37.72 248.87-3.97 127.96-36.96 182.41-133.5 182.75-96.55.34-112.66-14.67-123.57-158.64-10.92-143.98 33.06-138.6 21.4-191.3z"/>
  </svg>
  <script>
    anime({
      targets: '#gras',
      d: [
        'M226.07 433.57c1.43-75-73.93-166.07-179.64-208.2',
        'M226.07 433.57c1.43-75 .36-212.5-40.36-350.36',
        'M226.07 433.57c1.43-75 67.5-231.78 233.22-140.36',
        'M226.07 433.57c1.43-75 .36-212.5-40.36-350.36',
        'M226.07 433.57c1.43-75-73.93-166.07-179.64-208.2',
      ],
      duration: 3000,
      loop: true,
    });
    anime({
      targets: '#morph',
      d: 'M241.38 318.26c-11.66-52.7-44.84-99.51-6.93-170.64 37.9-71.13 186.18-166.6 252.91-118.68 66.74 47.92 41.33 158.28 0 227.64-41.32 69.36-64.65 170-30.2 272.98 34.43 102.97-50.96 163.97-141.02 158.64-90.05-5.32-187.73-158.89-121.2-225.6 66.52-66.72 58.1-91.64 46.44-144.34z',
      duration: 3000,
      direction: 'alternate',
      loop: true,
    });
  </script>
</body>
</html>
